
<template>
	<div class="ui-date" :style="style" :class="[classname]">
		<div class="ui-date-selectym" :class="selectymShow?'on':''">
			<div class="ui-date-h1">选择年月</div>
			<ui-select :data="yearList" ref="yearSelect"></ui-select>
			<ui-select :data="monthList" ref="monthSelect"></ui-select>
			<div>
				<ui-btn class="ui-date-btn-hr" @click="selectym">确定</ui-btn>
			</div>
		</div>
		<table class="ui-date-table">
			<tr>
				<td colspan="7" valign="middle" class="ui-date-month">
					<span class="ui-date-btn ui-date-prev" @click="prevMonth"> < </span>
					<span class="ui-date-center" @click="selectymShow=true">{{year}}/{{month}}</span>
					<span class="ui-date-btn ui-date-next" @click="nextMonth"> > </span>
				</td>
			</tr>
			<tr class="ui-date-week">
				<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
			</tr>
			<tr class='ui-date-tr' v-for="v in dateList">
				<td v-for="v2 in v" valign="middle" class="ui-date-td" :day="v2.day" :week="v2.week" :date="v2.date" :class="[v2.ison?'on':'',v2.istoady?'on2':'',v2.isselect?'':'disabled',v2.isempty?'empty':'']" :index="v2.index" @click="click(v2)">
					<div class="ui-date-day">{{v2.day}}</div>
					<div class="ui-date-data" v-if="marks" v-show="v2.marks">{{v2.marks?v2.marks.text:""}}</div>
				</td>			
			</tr>
			<tr v-if="istime">
				<td colspan="7" valign="middle" align="left">
					<ui-select :data="hourList" size="small" ref="hour" classname="ui-date-time"></ui-select>
					<ui-select :data="minuteList" size="small" ref="minute" classname="ui-date-time"></ui-select>
					<ui-select :data="secList" size="small" ref="sec" classname="ui-date-time"></ui-select>
					<ui-btn size="small" @click="changeTime">确定</ui-btn>
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	import select from './ui_select.vue';
	import btn from './ui_btn.vue';

	/*
	组件属性[
		data.value:value值 1900-01-01或 1900-01-01 00:00:00
		style:自定义样式
		classname:自定义class
		istime:是否显示时间输入框
		min:最小选择时间 1900-01-01或 1900-01-01 00:00:00
		max:最大选择时间 1900-01-01或1900-01-01 00:00:00
		disabledDate:["1900-01-01","1900-01-02",...] 不可选日期
		disabledWeek:[0,1,2,...] 不可选星期
		marks:[{date:"1900-01-01",text:'200.00',...},...] 日期下方的标注内容
		marksDate:[]特别日期标注,日期右上解
	],
	组件事件[
		change:选项发生改变时回调的父组件方法，callback(data[当前日期数据])
	]
	*/
	
	export default{
		props:{
			"defaultdata":{type:String,default:""},
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
			'min':{type:String,default:""},
			'max':{type:String,default:""},
			"istime":{type:Boolean,default:false},
			"disabledDate":{type:Array,default:[]},
			"disabledWeek":{type:Array,default:[]},
			"marks":{type:Array,default:[]},
		},
		data(){
			return {
				uiType:"ui-date",
				initDate:this.defaultdata?new Date(this.defaultdata):new Date(),//当前月份
				dateList:[],
				today:null,
				yearList:{
					options:[],value:""
				},
				monthList:{
					options:[
						{text:'1月',value:"1"},{text:'2月',value:"2"},{text:'3月',value:"3"},
						{text:'4月',value:"4"},{text:'5月',value:"5"},{text:'6月',value:"6"},
						{text:'7月',value:"7"},{text:'8月',value:"8"},{text:'9月',value:"9"},
						{text:'10月',value:"10"},{text:'11月',value:"11"},{text:'12月',value:"12"}
					],
					value:""
				},
				hourList:{options:[],value:""},
				minuteList:{options:[],value:""},
				secList:{options:[],value:""},
				selectymShow:false,//显示选择年月框
				currentDateData:null,//当前时间数据
				value:this.defaultdata
			}
		},
		computed:{
			year(){
				return this.initDate.getFullYear();
			},
			month(){
				return this.initDate.getMonth()+1>9?this.initDate.getMonth()+1:"0"+(this.initDate.getMonth()+1).toString();
			},
			day(){
				return this.initDate.getDate()+1>9?this.initDate.getDate()+1:"0"+(this.initDate.getDate()+1).toString();
			}
		},
		methods:{			
			prevMonth(){
				let date=new Date(this.initDate.setMonth(this.initDate.getMonth()-1));
				this.initDate=new Date(date);
				this.createDate();
			},
			nextMonth(){
				let date=new Date(this.initDate.setMonth(this.initDate.getMonth()+1));
				this.initDate=new Date(date);
				this.createDate()
			},
			click(data){
				if(!data.isselect)return;

				let index=event.currentTarget.getAttribute('index');
				for(let i=0;i<this.dateList.length;i++){
					for(let k=0;k<this.dateList[i].length;k++){
						if(this.dateList[i][k].index==index){
							this.dateList[i][k].ison=true;
							if(!this.istime){
								this.value=this.dateList[i][k].date;
							}else{
								this.value=this.dateList[i][k].date+" "+this.hourList.value+":"+this.minuteList.value+":"+this.secList.value;
							}
						}else this.dateList[i][k].ison=false;
					}
				}

				this.currentDateData=data;
				if(!this.istime)this.$emit('change',this.currentDateData);
			},
			createDate(){
				//创建日历
				let y=this.year,m=this.month;
				let res=[],tmpWeekArr=[];
				let tmpdate2=new Date(y+'/'+m+'/1'+" 0:0:0");
				let theFirstWeek=tmpdate2.getDay();
				let theFirstMonth=tmpdate2.getMonth()+1;
				let isstart=false,num=0;
				for(let i=1;i<=6;i++){
					tmpWeekArr=[];
					if(tmpdate2.getMonth()+1>theFirstMonth)break;
					for(let k=1;k<=7;k++){				
						if(k*i>theFirstWeek)isstart=true;
						if(isstart){
							if(tmpdate2.getMonth()+1>theFirstMonth){
								tmpWeekArr.push({
									ison:false,
									index:num,
									isselect:false,
									isempty:true
								});
								num++;
								continue;
							}
							let istoady=tmpdate2.getTime()==this.today.getTime()?true:false,self=this;
							let isselect=function(){
								let is;
								if(self.min){
									is=tmpdate2.getTime()>new Date(self.min).getTime()?true:false
									if(!is) return false;
								}
								if(self.max){
									is=tmpdate2.getTime()<=new Date(self.max).getTime()?true:false;
									if(!is) return false;
								}
								for(let a=0;a<self.disabledDate.length;a++){
									if(tmpdate2.getTime()==new Date(self.disabledDate[a]+" 0:0:0").getTime()){
										return false;
									}
								}
								for(let a=0;a<self.disabledWeek.lenght;a++){
									if(tmpdate2.getDay()==self.disabledWeek[a]){
										return false;
									}
								}
								return true;
							}();

							let ison=function(){
								let now=self.currentDateData?new Date(self.currentDateData.date) : self.initDate;
								if(tmpdate2.getTime() == new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0).getTime()){
									return true;
								}
								return false;
							}();

							let marks=function(){
								for(let a=0;a<self.marks.length;a++){
									if(tmpdate2.getTime()==new Date(self.marks[a].date+" 0:0:0").getTime()){
										return self.marks[a];
									}
								}
								return false;
							}();
							let tmpdate3=tmpdate2.getFullYear();
							tmpdate3+='-'+(tmpdate2.getMonth()+1>9?tmpdate2.getMonth()+1:"0"+(tmpdate2.getMonth()+1).toString());
							tmpdate3+='-'+(tmpdate2.getDate()>9?tmpdate2.getDate():"0"+tmpdate2.getDate());
							tmpWeekArr.push({
								day:tmpdate2.getDate(),//日期
								week:tmpdate2.getDay(),//星期
								date:tmpdate3,//完整日期
								ison:ison,//是否被选择
								istoady:istoady,//当日标记
								index:num,//索引
								isselect:isselect,//是否可选
								marks:marks,//标注内容
								isempty:false//是否空白
							});

							if(ison)this.currentDateData=tmpWeekArr[tmpWeekArr.length-1];
							tmpdate2.setDate(tmpdate2.getDate()+1);
						}else{
							tmpWeekArr.push({
								ison:false,
								index:num,
								isselect:false,
								isempty:true
							});
						}
						num++;
					}
					res.push(tmpWeekArr)
				}
				this.dateList=res;
			},
			selectym(){
				//确定年月
				if(!this.$refs.yearSelect.data.value || !this.$refs.monthSelect.data.value){
					alert('请选择年份或月份');
					return;
				}
				this.initDate=new Date(this.$refs.yearSelect.data.value,this.$refs.monthSelect.data.value-1,1,0,0,0);
				this.selectymShow=false;
				this.createDate();
			},
			changeTime(){
				//变更时间
				let date=this.value.split(' ');
				this.value=date[0]+" "+this.hourList.value+":"+this.minuteList.value+":"+this.secList.value;
				this.currentDateData.date=this.value;
				this.$emit('change',this.currentDateData);
			}
		},
		created(){
			//初始化
			let today=new Date();
			this.today=new Date(today.getFullYear(),today.getMonth(),today.getDate(),0,0,0);
			this.createDate();

			//初始化年月选择框
			let y=today.getFullYear()-20;
			while(y<today.getFullYear()+10){
				this.yearList.options.push({text:y+"年",value:y});
				y++;
			}
			
			this.yearList.value=this.initDate.getFullYear();
			this.monthList.value=this.initDate.getMonth()+1;

			//初始化时间选择框 
			if(this.istime){
				let tmpHourArr={},tmpMinuteArr={},tmpSecArr={};
				tmpHourArr.options=[];
				tmpMinuteArr.options=[];
				tmpSecArr.options=[];
				for(y=0;y<60;y++){
					let tmpy=y>9?y:"0"+y.toString();
					if(y<24)tmpHourArr.options.push({text:tmpy+"h",value:tmpy});
					tmpMinuteArr.options.push({text:tmpy+"m",value:tmpy});
					tmpSecArr.options.push({text:tmpy+"s",value:tmpy});
				}
				tmpHourArr.value=this.initDate.getHours();
				tmpMinuteArr.value=this.initDate.getMinutes();
				tmpSecArr.value=this.initDate.getSeconds();

				this.hourList=tmpHourArr;
				this.minuteList=tmpMinuteArr;
				this.secList=tmpSecArr;
			}

		},
		components:{
			'ui-select':select,
			'ui-btn':btn
		}
	}
</script>




